<template>
  <div class="shopping">
    <div class="box8">
      <h2><i class="el-icon-shopping-cart-full"></i>我的购物车</h2>
      <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
    </div>
    <div class="box9">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="">
          <template slot-scope="scope">
            <img :src="'api' + scope.row.productImg" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称">
          <template slot-scope="scope">
            {{ scope.row.productName }}
          </template>
        </el-table-column>
        <el-table-column label="单价" width="100px">
          <template slot-scope="scope"> {{ scope.row.price }}元 </template>
        </el-table-column>
        <el-table-column label="数量" width="260px">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.num"
              @change="addSubtract(scope.row.productID, scope.row.num)"
              :min="1"
              :max="scope.row.maxNum"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="小计" width="100px">
          <template slot-scope="scope">
            {{ scope.row.price * scope.row.num }}元
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <i
              class="el-icon-error"
              @click="delShopping(scope.row.productID)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
      <div class='el-card'>
        <div class="left">
          <span @click='$router.push("/about/allGoods")'>继续购物</span>|<span>共<span>{{sum}}</span>件商品，已选择<span>{{trueSum}}</span>件</span>
        </div>
        <div class="right"><span>合计：<span>{{money}}元</span></span>
        <el-button @click='goOrder'>去结算</el-button></div>
      </div>
    </div>
  </div>
</template>

<script>
import Shop from "../miAPI/shopping";
export default {
  data() {
    return {
      // 全部商品
      tableData: [],
      // 所有被选中的商品
      multipleSelection: [],
    };
  },
  methods: {
    // 被选中就会把选中的商品单独提出来放到val中
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val)
    },
    async getShoppingCart() {
      let { data: res } = await Shop.getShoppingCart({
        user_id: this.$store.state.user.user_id,
      });
      console.log(res);
      this.tableData = res.shoppingCartData;
      this.$store.commit('getLength',this.tableData.length)
    },
    // 商品数量传到后端的一个更新
    async addSubtract(id, num) {
      let { data: res } = await Shop.updateShoppingCart({
        user_id: this.$store.state.user.user_id,
        product_id: id,
        num: num,
      });
      // console.log(res)
      if (res.code == "001") {
        this.$notify({
          type: "success",
          title: "成功",
          message: res.msg,
          duration: 3000,
        });
      } else if (res.code == "002") {
        this.$notify({
          type: "warning",
          title: "提示",
          message: res.msg,
          duration: 3000,
        });
      }
    },
    // 删除商品
    async delShopping(id) {
      let { data: res } = await Shop.deleteShoppingCart({
        user_id: this.$store.state.user.user_id,
        product_id: id,
      });
      // console.log(res)
      this.getShoppingCart();
      if (res.code == "001") {
        this.$notify({
          type: "success",
          title: "成功",
          message: res.msg,
          duration: 3000,
        });
      } else if (res.code == "002") {
        this.$notify({
          type: "warning",
          title: "提示",
          message: res.msg,
          duration: 3000,
        });
      }
    },
    // 点击结算后跳转 并把数据给传到vuex
    goOrder(){
      this.$store.commit('transfer',this.multipleSelection)
      this.$router.push('/about/confirmorder')
    }
  },
  mounted() {
    this.getShoppingCart();
  },
  computed:{
    // 总价的计算
    money(){
      var money = 0
      this.multipleSelection.forEach(item=>{
        money += item.num*item.price
      })
      return money
    },
    // 商品总数的计算
    sum(){
      var sum = 0
      this.tableData.forEach(item=>{
        sum += item.num
      })
      return sum
    },
    // 被选中商品的总数计算
    trueSum(){
      var sum = 0
      this.multipleSelection.forEach(item=>{
        sum += item.num
      })
      return sum
    }
  }
};
</script>

<style lang='scss'>
.shopping {
  width: 100%;
  .box8 {
    width: 100%;
    display: flex;
    padding: 40px 8% 20px;
    border-bottom: 3px solid orange;
    h2 {
      font-size: 30px;
      margin-right: 30px;
    }
    i {
      color: orange;
      font-weight: bold;
    }
    span {
      padding-top: 16px;
    }
  }
  .box9 {
    width: 100%;
    padding: 0 8%;
    background: #f5f5f5;
    .el-card {
      width: 100%;
      height: 50px;
      margin: 20px 0 20px 0;
      display: flex;
      justify-content: space-between;
      .left{
        height: 50px;
        line-height: 50px;
        display: flex;
        &>span:first-child{
          margin-left:30px;
          margin-right: 20px;
        }
        &>span:first-child:hover{
          color:orange;
          cursor: pointer;
        }
        span:last-child{
          margin-left: 20px;
          &>span{
            margin: 0 5px;
            font-size: 20px;
            color: orange;
          }
        }
      }
      .right{
        height: 50px;
        &>span:first-child{
          color: orange;
          margin-right: 30px;
          &>span{
            font-size: 30px;
          }
        }
        &>.el-button{
          width: 200px;
          height: 100%;
          border: none;
          background: orange;
          color: #fff;
          font-size: 24px;
          border-radius: 0;
        }
      }
    }
    img {
      width: 80px;
      height: 80px;
    }
    .el-table__row:hover > td {
      background-color: #fff !important;
    }
    .el-table__row--striped:hover > td {
      background-color: #fff !important;
    }
    .el-icon-error {
      font-size: 24px;
    }
    .el-icon-error:hover {
      color: orange;
      cursor: pointer;
    }
  }
}
</style>